<template>
  <div
    title="粗体"
    class="tlbr-btn"
    :class="{ active: boldType }"
    @click="changeBold"
  >
    <div class="tlbr-btn__icon">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M6.9999 4.90002C6.66853 4.90002 6.3999 5.16865 6.3999 5.50002V11.5V18.5C6.3999 18.8314 6.66853 19.1 6.9999 19.1H13.4999C15.7643 19.1 17.5999 17.2644 17.5999 15C17.5999 13.3676 16.6459 11.958 15.2649 11.2983C16.0793 10.6383 16.5999 9.62997 16.5999 8.50002C16.5999 6.5118 14.9881 4.90002 12.9999 4.90002H6.9999ZM12.9999 10.9C14.3254 10.9 15.3999 9.82551 15.3999 8.50002C15.3999 7.17454 14.3254 6.10002 12.9999 6.10002H7.5999V10.9H12.9999ZM7.5999 12.1V17.9H13.4999C15.1015 17.9 16.3999 16.6017 16.3999 15C16.3999 13.3984 15.1015 12.1 13.4999 12.1H12.9999H7.5999Z"
          fill="currentColor"
        ></path>
      </svg>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, inject, shallowRef, computed } from 'vue'
import Quill, { StringMap } from 'quill'
const Delta = Quill.import('delta')
const QuillEditor = inject('QuillEditor', shallowRef<Quill>())
const formatMap = inject('formatMap', ref<Record<string, any>>({}))
const getSelectionFormat = inject('getSelectionFormat', () => {})
const boldType = computed(() => {
  return formatMap.value.bold
})
const changeBold = () => {
  QuillEditor.value!.focus()
  QuillEditor.value?.format('bold', !boldType.value)
  getSelectionFormat()
}
</script>
<style lang="scss" scoped></style>
